<template>
  <div class="red" v-if="visible"></div>
  <div class="green" v-show="visible"></div>

  <div v-if="isLogin">欢迎回来~</div>
  <div v-else>请登录...</div>

  <div v-if = "eat === 1">吃米饭</div>
  <div v-else-if = "eat === 3">吃疯狂星期四</div>
  <div v-else = "eat === 2">吃米粉</div>
</template>

<script setup>
  import {ref} from "vue"
    // 指令
    // 1.概念：作用在标签上，vue的特殊语法
    // 2.作用：增强标签渲染数据的能力
    // 3.分类
      // 4.条件渲染指令: 根据表达式的结果为true/false决定是否展示
      // v-if-根据boolean类型，显示/隐藏-直接移除-频繁显示/隐藏开销大
      // v-show-根据boolean类型，显示/隐藏-通过display属性使不显示-频繁显示/隐藏使用v-show
    let visible = ref(true)
      // v-if+v-else做双分支渲染,不是则是
    let isLogin = ref(false)
      // v-if+v-elseif+v-else-做多分支渲染，不是，如果是则是，都不是则是
    let eat = ref(1)
      // 5.列表渲染指令: 基于数组循环生成一套列表
      // 6.双向绑定指令: 数据<->视图(数据与视图相互影响)
</script>

<style scoped>
.red, .green {
  width: 200px;
  height: 200px;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
</style>